<template>
  <div>
    <div style="height: 5rem">
      <h2 style="float: left">score：{{ score }}</h2>
      <h2 style="float: left; margin-left: 5rem">
        hp：<i
          class="el-icon-s-opportunity"
          v-for="(item, index) in hp"
          :key="index"
        ></i>
      </h2>
    </div>
    <div>
      <span>科目范围：{{ info }} </span>
      <span style="margin-left: 5rem"
        >本题属：{{ currentQuest.school }}<i class="el-icon-arrow-right"></i>
        {{ currentQuest.type }}
      </span>
    </div>
    <h2>题目:{{ currentQuest.quiz }}</h2>
    <div style="width: 30rem"></div>
    <div>
      <el-radio
        v-for="(item, index) in currentQuest.options"
        :key="index"
        v-model="radio1"
        :label="index + 1"
        border
        >{{ item }}</el-radio
      >
    </div>
    <el-button type="primary" style="margin-top: 20px" @click="submit"
      >next</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 题库的数据
      querslist: [],
      // 所得分数
      score: 0,
      // 所出题目的所有数据
      currentQuest: {},
      // 所选答案
      radio1: "",
      // 科目范围
      info: [],
      // 初始的血量
      hp: [1, 2, 3],
      // 记录排行榜
      newScoreList: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取题库
    async getList() {
      const { data: res } = await this.$http({
        url: "/api/quizzes.json",
        method: "get",
      });
      // 获取题库数据
      this.querslist = res;
      // 确定答题范围的数据
      this.getQuestRange();
      // 产生随机问题
      this.randomQuest();
    },
    // 随机产出题目 并且不能重复
    randomQuest() {
      // this.getList()
      const currenttindex = Math.round(this.querslist.length * Math.random());
      this.currentQuest = this.querslist[currenttindex];
      this.querslist.splice(currenttindex, 1);
      console.log(this.currentQuest);
      // console.log(Math.round(this.querslist.length * Math.random()));
      // console.log(currenttindex);
    },
    // 获取答题范围
    getQuestRange() {
      // 拿到答题范围
      this.info = window.localStorage.getItem("checkedWords").split(",");
      // 用拿到的答题范围过滤随机出题的范围
      this.querslist = this.querslist.filter((item) => {
        return this.info.includes(item.school);
      });
    },
    // 提交答案
    submit() {
      // 答对了
      if (this.currentQuest.answer === this.radio1) {
        this.score++;
        this.$message.success("回答正确");
        // 确定答题范围的数据
        this.getQuestRange();
        // 产生随机问题
        this.randomQuest();
        this.radio1 = 0;
      } else {
        // 答错了
        this.$message.error("回答错误");
        // 血量减少一点
        this.hp.pop();
        // 确定答题范围的数据
        this.getQuestRange();
        // 产生随机问题
        this.randomQuest();
        this.radio1 = 0;
      }
    },
  },
  watch: {
    hp: {
      handler: function () {
        if (this.hp.length === 0) {
          this.$message.info("很遗憾 您错的太多啦 答题结束 三秒后返回首页");
          setTimeout(() => {
            if (window.localStorage.getItem("scoreList") === null) {
              this.newScoreList = this.newScoreList.push(this.score);
              window.localStorage.setItem("scoreList", this.newScoreList);
            } else {
              this.newScoreList = window.localStorage
                .getItem("scoreList")
                .split(",");
              console.log(this.newScoreList);
              this.newScoreList.push(this.score);
              window.localStorage.setItem("scoreList", this.newScoreList);
            }
            this.$router.replace({ path: "/" });
          }, 3000);
        }
        console.log(this.hp);
      },
      deep: true,
    },
  },
  mounted() {},
};
</script>
<style scoped>
</style>
